<template>
  <Dialog title="查看作业指导书" v-model="dialogVisible" width="80%">
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      :height="400"
      border
      v-loading="formLoading"
    >
      <el-table-column
        :property="item.val"
        :label="item.label"
        :min-width="item.width"
        :key="item.val"
        :formatter="item.val == 'releaseTime' ? dateFormatter : ''"
        align="center"
        v-for="item in tableTitle"
      />
      <el-table-column label="操作" width="80" align="center" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="openFile(scope.row.filePath)" type="primary"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="queryParams.total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
   //import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
   import * as CraftTaskBillApi from '@/api/config/craftTaskBill'
   import { dateFormatter } from '@/utils/formatTime'
   const dialogVisible = ref(false) // 弹窗的是否展示
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const tableData = ref([]) // 表格数据
   const queryParams = reactive({
     total: 0,
     pageNo: 1,
     pageSize: 10,
     partName: '',
     productNumber: '',
     dictProcessName: '',
     productionTaskId:''
   })
   //查看
   const openFile = (url: string) => {
     window.open(url)
   }
   /**表头 */
   const tableTitle = ref([
     {
       label: '文件名称',
       val: 'fileName',
       width: 200
     },
     {
       label: '文件类型',
       val: 'fileType',
       width: 100
     },
     {
       label: '文件大小',
       val: 'fileSize',
       width: 100
     },
     {
       label: '版本号',
       val: 'version',
       width: 200
     },
     {
       label: '启用日期',
       val: 'enableTime',
       width: 200
     },
     {
       label: '停用日期',
       val: 'stopTime',
       width: 200
     },
     {
       label: '创建人',
       val: 'creatorName',
       width: 200
     },
     {
       label: '创建时间',
       val: 'createTime',
       width: 200
     }
   ])
   /** 打开弹窗 */
   const open = async (data: object) => {
     console.log('data', data)
     queryParams.partName = data.partName
     queryParams.productNumber = data.productNumber
     queryParams.dictProcessName = data.dictProcessName
     queryParams.productionTaskId = data.productionTaskId
     dialogVisible.value = true
     getList()
   }
   defineExpose({ open }) // 提供 open 方法，用于打开弹窗

   /** 查询列表 */
   const getList = async () => {
     formLoading.value = true
     try {
       const data = await CraftTaskBillApi.getCraftCourseBook(queryParams)
       tableData.value = data.list
       queryParams.total = data.total
       console.log('tableData.value', tableData.value)
     } finally {
       formLoading.value = false
     }
   }
</script>
<style lang="scss" scoped>
   .footer {
     margin-top: 70px;
     display: flex;
     justify-content: flex-end;
   }
</style>